<!--
<template>
  <div class="ten_box">
    <m-header modile-title="练习13" go-back="true"></m-header>
    <div class="main">
      <div class="header">
        <div v-for="m in 5">头部展示内容-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;</div>
      </div>
      <div class="auto_fixed" :class="auto_fixed">自动粘滞固定头部，需要一直展示的</div>
      <div class="auto_fixed_fake" :style="{display: auto_fixed.fixed ? 'block':'none'}"></div>
      <div class="content">
        <div v-for="n in 40">
          tabs内部内容，最帅程序员专享受&#45;&#45;&#45;&#45;&#45;&#45;我的最爱&#45;&#45;李易峰
        </div>
      </div>
      <div class="auto_fixed" :class="auto_fixed">自动粘滞固定头部，需要一直展示的</div>
    </div>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    .header {
      padding: 8px 10px;
    }
    .auto_fixed {
      height: 3em;
      background: orange;
      line-height: 3em;
      text-align: center;
    }
    .fixed {
      position: fixed;
      top: 60px;
      width: 100%;
    }
    .content {
      color: gray;
      padding: 8px;
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'

  export default {
    name: 'lianxi13',
    data() {
      return {
        auto_fixed: {
          fixed: false
        }
      }
    },
    methods: {
      onScroll() {
        let scrolled = document.documentElement.scrollTop || document.body.scrollTop // 获取整个页面的滚动
        let header_height = null
        if (document.getElementsByClassName('header')[0]) {
          header_height = document.getElementsByClassName('header')[0].offsetHeight // 需要吸顶的header头部上面的内容
        }
        this.auto_fixed = {
          auto_fixed: true,
          fixed: scrolled >= header_height
        }
      }
    },
    mounted() {
      this.$nextTick(function () {
        window.addEventListener('scroll', this.onScroll)
      })
    },
    components: {
      mHeader
    }
  }
</script>
-->
<template>
  <div class="ten_box">
    <m-header modile-title="练习13" go-back="true"></m-header>
    <!--<div class="scroll" v-for="n in 10">
      <div class="header">header</div>
      <div class="nav" :class="navBarFixed == true ? 'navBarWrap' :''">吸顶导航</div>
    </div>-->
    <p>当前时间：{{nowTime}}</p>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    .scroll {
      height: 2000px;
    }
    .header {
      height: 90px;
      background: red;
      text-align: center;
      color: #fff;
    }
    .nav {
      padding: 15px;
      width: 100%;
      box-sizing: border-box;
      background: greenyellow;
      text-align: center;
    }
    .navBarWrap {
      position: fixed;
      top: 50px;
      z-index: 33;
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'

  export default {
    name: 'lianxi13',
    data() {
      return {
        navBarFixed: false,
        nowTime: ''
      }
    },
    // 创建完成时
    created() {
      // 调用事件且使他变成动态
      this.timer = setInterval(() => {
        this.nowTimes()
      }, 1000)
    },
    methods: {
      watchScroll() {
        var scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop; // 页面的滚动距离
        //  当滚动超过 90 时，实现吸顶效果
        if (scrollTop > 90) {
          this.navBarFixed = true;
        } else {
          this.navBarFixed = false;
        }
      },
      // 时间转换器
      timeFormate(timeStamp) {
        // 年
        let year = new Date(timeStamp).getFullYear();
        // 月
        let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
        // 日
        let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
        // 时
        let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
        // 分
        let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
        // 秒
        let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
        this.nowTime = year + '年' + month + '月' + date + '日' + '' + hh + ':' + mm + ':' + ss
      },
      // 定时器函数
      nowTimes() {
        this.timeFormate(new Date());
        setInterval(this.nowTimes, 30 * 1000)
      }
    },
    // 挂载完成时
    mounted() {
      window.addEventListener("scroll", this.watchScroll);
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer) // 清除定时器
      }
    },
    components: {
      mHeader
    }
  }
</script>
